<template>
  <!--侧滑菜单容器-->
  <div id="offCanvasWrapper" class="mui-off-canvas-wrap">
    <!--菜单部分-->
    <div
      v-if="isShowFilter"
      @click="isShowFilter = false"
      class="filter-bg"
    ></div>
    <aside
      v-if="isShowFilter"
      id="offCanvasSide"
      class="mui-off-canvas-right aside-menu filter-wrap"
    >
      <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
        <div class="mui-scroll flex-column flex-space-between">
          <div>
            <h4 class="means-title">完成情况</h4>
            <div class="flex-justify-start">
              <div
                @click.stop="isFinished = -1"
                class="gray-btn"
                :class="{ offcanvasActive: isFinished === -1 }"
              >
                全部
              </div>
              <div
                @click.stop="isFinished = 0"
                class="gray-btn"
                :class="{ offcanvasActive: isFinished === 0 }"
              >
                未完成
              </div>
              <div
                @click.stop="isFinished = 1"
                class="gray-btn"
                :class="{ offcanvasActive: isFinished === 1 }"
              >
                已完成
              </div>
            </div>
          </div>
          <div class="flex-center screen-btn">
            <div @click="reset" class="reset-btn offCanvasHide">重置</div>
            <div @click="submit" class="sure-btn offCanvasHide">确定</div>
          </div>
        </div>
      </div>
    </aside>
    <div class="mui-inner-wrap">
      <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
        <header @click="isShowFilter = false" class="mui-bar mui-bar-nav">
          <div class="header-common-title flex-justify-start">
            <div @click="fn.goHome()" class="mui-action-back">
              <img class="back-btn" src="../../../../static/images/back.png" />
            </div>
            <div class="header-search flex-center">全部党费统计</div>
            <div class="header-right flex-between-center">
              <img
                class="back-btn"
                src="../../../../static/images/search_white.png"
                @click="search"
              />
              <a
                @click.stop="isShowFilter = true"
                href="javascript:void(0)"
                class="header-right flex-center"
                ><img src="../../../../static/images/shaixuan.png" />筛选</a
              >
            </div>
          </div>
        </header>
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll paddingBottom mui-pages">
            <div class="statistics-header">
              <h4>中共湖南省永州监狱总支部</h4>
              <div class="time-line flex-center">
                <div class="message-line"></div>
                <div
                  @click="showTimePicker()"
                  id="recordYyear"
                  class="year-btn flex-center"
                >
                  <span id="recordTimes">{{ year }}</span>
                  <img
                    class="arrow_icon"
                    src="../../../../static/images/select_down.png"
                  />
                </div>
                <div class="message-line"></div>
              </div>
              <div class="flex-center">
                <div class="flex-center work-message-item-tab">
                  <div class="flex-column flex-center">
                    <p>全部应收党费</p>
                    <p class="work-red">￥{{ data.shouldPay }}</p>
                  </div>
                </div>
                <div class="flex-center work-message-item-tab">
                  <div class="flex-column flex-center">
                    <p>全部实收党费</p>
                    <p class="work-blue">￥{{ data.realPay }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mui-table-view organization-lists record-member-lists">
              <div
                class="mui-table-view organization-lists record-member-lists"
              >
                <div
                  class="mui-table-view organization-lists record-member-lists"
                >
                  <div class="mui-table-view organization-lists pay-scroll">
                    <cube-scroll
                      ref="scroll"
                      :options="options"
                      @pulling-up="onPullingUp"
                    >
                      <cube-swipe>
                        <transition-group name="swipe" tag="div">
                          <div
                            class="mui-table-view-cell"
                            v-for="(data, index) in swipeData"
                            :key="data.partyGroupId"
                          >
                            <li
                              @click="detail(data)"
                              class="mui-table-view-cell flex-between-center"
                            >
                              <div class="mine-lists-content lists-input">
                                <h2 class="organization-lists-title">
                                  {{ data.partyGroupName }}
                                </h2>
                                <div class="mine-lists-tips">
                                  应缴党费:
                                  <span class="organization-lists-title"
                                    >￥{{ data.shouldPay }}</span
                                  >，实缴党费:<span
                                    class="organization-lists-title"
                                    >￥{{ data.realPay }}</span
                                  >
                                </div>
                              </div>
                              <p v-if="data.shouldPay === data.realPay">
                                已完成
                              </p>
                              <p
                                v-if="data.shouldPay !== data.realPay"
                                class="mine-lists-money"
                              >
                                未完成
                              </p>
                            </li>
                          </div>
                        </transition-group>
                      </cube-swipe>
                      <!-- <div class="text-center no-data" v-if="swipeData.length===0">
                        <img src="../../../../static/images/no_data.png" alt="">
                        <p>暂无数据</p>
                      </div> -->
                      <!-- W noData -->
                      <noData v-if="swipeData.length === 0"></noData>
                      <onBottom v-else-if="onBottom"></onBottom>
                    </cube-scroll>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部tabbar    start -->
        <paymentFooterbar></paymentFooterbar>
      </div>
    </div>
  </div>
</template>

<script>
import paymentFooterbar from "../common/paymentFooterbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    paymentFooterbar,
  },
  name: "statistics",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 20,
      isLoading: false,
      year: "",
      _time: "",
      data: {},
      isShowFilter: false,
      isFinished: -1,
      payStatus: "",
    };
  },
  created() {
    this._time =
      this.$store.state._time || new Date(new Date().getFullYear(), 1, 1);
    this.year = moment(this._time).format("YYYY年MM月");
    this.loadData();
  },
  methods: {
    loadData() {
      let yearMonth = moment(this._time).format("YYYY-MM");
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        partyGroupName: "",
        payStatus: this.payStatus,
        yearMonth: yearMonth,
      };
      loginService.getPartyGroupPayStatus(data).then((res) => {
        if (
          res.code === 200 &&
          res.data.partyChargeGroupPayStatusList.length < 1
        ) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        this.data = res.data;
        this.swipeData = this.swipeData.concat(
          res.data.partyChargeGroupPayStatusList
        );
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    showTimePicker() {
      let me = this;
      if (!this.datePicker) {
        let nowYear = new Date().getFullYear();
        this.datePicker = this.$createDatePicker({
          columnCount: 2,
          min: new Date(nowYear - 10, 1, 1),
          max: new Date(nowYear + 1, 1, 1),
          value: new Date(nowYear, 1, 1),
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.year = moment(selectedTime).format("YYYY年MM月");
            this.$store.state._time = this._time = selectedTime;
            this.reloadData();
          },
        });
      }
      this.datePicker.show();
      setTimeout(() => {
        this.datePicker.$updateProps({
          value: me._time,
        });
      }, 100);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    reloadData() {
      this.data = {};
      this.swipeData = [];
      this.pageIndex = 0;
      this.loadData();
    },
    detail(data) {
      this.$store.state.paymentDetails = data;
      this.$router.push({ path: `/paymentDetails/${this._time}` });
    },
    reset() {
      this.isFinished = -1;
    },
    submit() {
      if (this.isFinished === -1) {
        this.payStatus = "";
      } else if (this.isFinished === 0) {
        this.payStatus = "0";
      } else {
        this.payStatus = "1";
      }
      this.pageIndex = 0;
      this.swipeData = [];
      this.isShowFilter = false;
      this.loadData();
    },
    search() {
      let status;
      if (this.payStatus === "") {
        status = "2";
      } else {
        status = this.payStatus;
      }
      this.$router.push({ path: `paymentSearch/${this._time}/${status}` });
    },
  },
};
</script>

<style scoped="" lang="scss">
#offCanvasSide {
  visibility: visible;
  z-index: 13;
}

.swiper-no-swiping {
  transform: translateX(0) !important;
}

.filter-wrap {
  z-index: 13;
  visibility: visible;
}

.filter-bg {
  background: rgba(#000, 0.3);
  z-index: 12;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.pay-scroll {
  height: calc(100vh - 260px);
}
</style>
